<template>
	<view>
		<uni-nav-bar fixed left-icon="back" title="评论列表" @clickLeft="clickLeft()"></uni-nav-bar>
		<five-mul-commentlist
            :commentList="commentList"
            @clickPraise="clickPraiseComment"
            @clickDelete="clickDeleteComment"
            @clickDeleteChild="clickDeleteCommentChild"
            @clickRecomment="clickRecomment"
            @clickRecommentChild="clickRecommentChild"
			@previewImage="previewImage"
        ></five-mul-commentlist>
		
		<view class="flex-column-center" v-if="showReply">
			<view class="bottom-dh-char" style="font-size: 55rpx;">
				<!-- vue无法使用软键盘"发送" -->
				 <input  v-model="msg" focus class="dh-input" type="text" style="background-color: #f0f0f0;" 
				 @confirm="sendMsg" confirm-type="search" placeholder-class="my-neirong-sm"
				 placeholder="回复" /> 
				 <view @click="sendMsg" class="cu-tag bg-cyan round">
				 	发送
				 </view>
				 <uni-icons @click="showReply = !showReply" type="arrowdown" size="48" color="#999"></uni-icons>
			</view>
		</view>
		
	</view>
</template>

<script>
	import FiveMulCommentlist from '@/components/five-mul-commentlist/five-mul-commentlist.vue'
	
	export default{
		components: {
			FiveMulCommentlist
		},
		data() {
			return{
				msg: '',
				showReply: false,
				commentList: [{
						"COMMENT_TIME": "2020-11-25 12:20:30",
						"FIRSTNICKNAME": "网友2135486",
						"IS_PRAISE": false,
						"COMMENT": "“树在水中生，水在林中流”是林正群海；蓝蓝的海子中一条绿色的颜色贯穿其中，像是一条龙，这就是卧龙海；在阳光的照射下海子泛起点点光，这是火花海；落日朗瀑布是最宽的瀑布，气势磅礴，让人叹为观止……",
						"PRAISE_NUM": 15,
						"CANDELETE": 0,
						"HEADIMGURL": "../../../static/image/tabBar/card@2.png",
						"PARENTID": "",
						"SECONDNICKNAME": null,
						imageList: [
							'http://p6.itc.cn/images01/20201021/526964886f1a4e529b95da5e0e102479.jpeg',
							'http://p3.itc.cn/images01/20201021/bdc5a9ef3f8e4cb199c0fd385e89567d.jpeg',
							'http://p5.itc.cn/images01/20201021/8ef11b4f523348d89a1be4295c9e70a8.png',
							'http://p2.itc.cn/images01/20201021/59f0d2008867449ca835bcd1ed35e842.jpeg'
						],
						"CHILD_ANWSER_LIST": [{
							"COMMENT_TIME": "2020-11-25 12:20:30",
							"FIRSTNICKNAME": "网友64894",
							"IS_PRAISE": false,
							"COMMENT": "云谷田园生态农业小镇，生态田园色彩斑斓，犹如童话世界。",
							"PRAISE_NUM": 0,
							"CANDELETE": 0,
							"HEADIMGURL": "../../../static/image/tabBar/card@2.png",
							"SECONDNICKNAME": "阿飞哥哥"
						}]
					},{
						"COMMENT_TIME": "2020-11-25 12:20:30",
						"FIRSTNICKNAME": "网友2135486",
						"IS_PRAISE": false,
						"COMMENT": "云谷田园生态农业小镇是一个以农业观光休闲、农耕文化体验、乡村民俗旅游、户外运动和养生度假为主打，集精品农业、生态旅游、文化休闲等为一体的大型综合体，目前正在创建国家4A级景区。",
						"PRAISE_NUM": 6,
						"CANDELETE": 1,
						"HEADIMGURL": "../../../static/image/tabBar/card@2.png",
						"PARENTID": "",
						"SECONDNICKNAME": null,
						"CHILD_ANWSER_LIST": [{
							"COMMENT_TIME": "2020-11-25 12:20:30",
							"FIRSTNICKNAME": "网友54441",
							"IS_PRAISE": false,
							"COMMENT": "云谷田园生态农业小镇，生态田园色彩斑斓，犹如童话世界。",
							"PRAISE_NUM": 1,
							"CANDELETE": 1,
							"HEADIMGURL": "../../../static/image/tabBar/card@2.png",
							"SECONDNICKNAME": "阿飞哥哥"
						}]
					}]
			}
		},
		methods:{
			sendMsg(){
				// 消息为空不做任何操作
				if(this.msg==""){
					return 0;
				}
				this.commentList[1].CHILD_ANWSER_LIST.push({
						"COMMENT": this.msg,
						"FIRSTNICKNAME": "网友2135486",
						"FIRSTNICKNAME": "网友64894",
						"CANDELETE": 1,
						"SECONDNICKNAME": "阿飞哥哥"
					})
				// 清除消息
				this.msg=""
			},
			//	点赞评论  我真是个机灵鬼
			clickPraiseComment(item) {
				if(!item.IS_PRAISE) {
					item.PRAISE_NUM += 1
					item.IS_PRAISE = true
				} else {
					item.PRAISE_NUM -= 1
					item.IS_PRAISE = false
				}
			},
			//	删除父级评论
			clickDeleteComment(item) {
				this.commentList.splice(1, 1)
				console.log('删除父级评论')
			},
			//	删除子评论
			clickDeleteCommentChild(item) {
				this.commentList[1].CHILD_ANWSER_LIST.splice(item, 1)
				console.log('删除子级评论')
			},
			//	回复
			clickRecomment(item) {
				this.showReply = true
				console.log('回复')
			},
			// 子评论用户
			clickRecommentChild(item) {
				console.log('子级评论用户')
			},
			//	预览图片
			previewImage(item, index) {
				var i = item.imageList; //获取当前页面的轮播图数据
				uni.previewImage({
					current:index, //预览图片的下标
					urls:i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
            clickLeft() {
                uni.navigateBack()
            }
		}
	}
</script>

<style>
	.flex-column-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0;
	}
	.bottom-dh-char{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		background-color: #f9f9f9;
		width: 750rpx;
		height: 110rpx;
	}
	.dh-input{
		width: 520rpx;
		height: 65rpx;
		border-radius: 30rpx;
		padding-left: 15rpx;
		font-size: 28rpx;
		background-color: #FFFFFF;
	}
	.my-neirong-sm {
		font-size: 22rpx;
		color: #616161;
	}
	.cu-tag {
		font-size: 24rpx;
		vertical-align: middle;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		white-space: nowrap;
		justify-content: center;
		align-items: center;
	}
	.bg-cyan {
	    background-color: #1cbbb4;
	    color: #ffffff;
	}
	.round {
	    border-radius: 50rpx;
	}
</style>
